<template>
  <a-row :gutter="10">
    <a-col :span="6">
      <a-card
        hoverable
        :bordered="false"
        :style="{ width: '100%', marginBottom: '10px' }"
      >
        <div class="info">
          <div>
            <a-avatar :size="62" :style="{ backgroundColor: '#E1E1E1' }">
              <IconUser />
            </a-avatar>
          </div>
          <div class="info-right">
            <div>你好，{{nickname}}</div>
            <div>{{currentTime}}</div>
          </div>
        </div>
      </a-card>
      <kjdh></kjdh>
      <jqrszjeCharts v-if="chartsShow == 'jqrszjeCharts'"></jqrszjeCharts>
      <jqrblCharts v-if="chartsShow == 'jqrblCharts'"></jqrblCharts>
      <jqrpslCharts v-if="chartsShow == 'jqrpslCharts'"></jqrpslCharts>
    </a-col>
    <a-col :span="12">
        <db></db>
        <zhtj></zhtj>
    </a-col>
    <a-col :span="6">
        <xtgg></xtgg>
        <zytx></zytx>
    </a-col>
  </a-row>
</template>
<script setup>
    import { ref,onMounted,onBeforeUnmount } from 'vue'
    import tool from '@/utils/tool'
    import kjdh from './components/kjdh.vue'
    import jqrszjeCharts from './components/jqrszjeCharts.vue'
    import jqrblCharts from './components/jqrblCharts.vue'
    import jqrpslCharts from './components/jqrpslCharts.vue'
    import xtgg from './components/xtgg.vue'
    import zytx from './components/zytx.vue'
    import db from './components/db.vue'
    import zhtj from './zhtj.vue'
      import { useAppStore, useUserStore } from '@/store'
      const currentTime = ref('')
      const userStore = useUserStore()
      const nickname = ref('')
      const timer = ref(null)
      onBeforeUnmount(()=>{
        clearInterval(timer.value)
      })
      const roles = ref('')
      const chartsShow = ref('')
      onMounted(()=>{
          nickname.value = userStore.user.nickname
          roles.value = userStore.roles[0]
            if(roles.value == 'superAdmin'){
                chartsShow.value = 'jqrblCharts'
            }
            if(roles.value == 'dzzy' || roles.value == 'yunshuyuan' || roles.value == 'yybzg'){
              chartsShow.value = 'jqrblCharts'
            }
            if(roles.value == 'caiwu'){
               chartsShow.value = 'jqrszjeCharts'
            }
            if(roles.value == 'psgs'){
                chartsShow.value = 'jqrpslCharts'
            }
            if(roles.value == 'boos'){
                chartsShow.value = 'jqrblCharts'
            }
        updateTime()
        timer.value = setInterval(updateTime, 1000);
      })
      const updateTime = () => {
        currentTime.value = tool.dateFormat(new Date())
            // currentTime.value = new Date().toLocaleTimeString();
        }
</script>
<style scoped>
.info {
  display: flex;
  align-items: center;
  height:80px;
}
.info-right {
    margin-left: 10px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    line-height:26px;
    letter-spacing: 0px;
    /* display: flex; */
   
  }
</style>
